import Taro, {Component} from '@tarojs/taro'
import {changeNavBar, getLine} from '../../../utils/utils'
import {ScrollView, View, Image} from '@tarojs/components'
import {AtIcon, AtAvatar} from 'taro-ui'
import HotSwiper from '../../../components/hotSwiper/index'
import './index.scss'
import Line from "../../../components/line/index";
import TopicAndMore from "../../../components/topicAndMore/index";
import ChallengeCard from "../../../components/challengeCard/index";
import PersonCard from "../../../components/personCard/index";

const LESS = 4
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hotChallenge: [
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/goods/2.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期'
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期'
        }
      ],
      hotTopic: [
        {
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/goods/4.jpg',
          topicName: '早起'
        },
        {
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1543161281489.png',
          topicName: '早睡'
        }
      ],
      hotPerson: [
        {
          name: '凯迪',
          topicName: '早起',
          avatar: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png'
        },
        {
          name: 'ahmatjan',
          topicName: '早睡',
          avatar: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/goods/3.jpg'
        },
        {
          name: 'CCC',
          topicName: '每日10000步',
          avatar: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/goods/5.jpg'
        }
      ],
      hotChallenges: [
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
        {
          topic: '每日10000步',
          img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
          extra: '说好的每日完成的，走起来',
          totalPerson: 1000,
          totalMoney: 10000,
          period: '第123期',
          startTime: '',
          endTime: ''
        },
      ],
      moreHotChallenge: false,
      hotRelease: [{
        id: '1',
        title: '越吃越胖的蔬菜，越吃越瘦的主食',
        img: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
        content: '越吃越胖的蔬菜，越吃越瘦的主食,越吃越胖的蔬菜，越吃越瘦的主食,越吃越胖的蔬菜，越吃越瘦的主食',
        user: {
          id: '01',
          name: 'ahmatjan',
          avatar: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png'
        },
        like: 123,
        comment: 23
      }]
    }
    this.changeNavBarTitle()

  }

  changeNavBarTitle = () => {
    changeNavBar({
      title: ''
    })
  }

  componentDidMount() {
    console.log("123")
  }

  handleMoreRecommendedTopicsClick = () => {
    console.log('get more topics')
  }

  handleMoreHotChallengesClick = () => {
    console.log('get more hot challenges')
  }

  handleMoreHotReleaseClick = () => {
    console.log('get more hot release')
  }

  render() {
    const {
      hotChallenge,
      hotPerson,
      hotTopic,
      hotChallenges,
      moreHotChallenge,
      hotRelease
    } = this.state
    const hotChallengesProps = {
      title: '热门挑战',
      handleMoreClick: this.handleMoreHotChallengesClick
    }
    const recommendedTopicProps = {
      title: '推荐主题',
      handleMoreClick: this.handleMoreRecommendedTopicsClick
    }
    const hotReleaseProps= {
      title: '热门动态',
      handleMoreClick: this.handleMoreHotReleaseClick
    }

    return (
      <ScrollView
        scrollY
        className='container'
      >
        <View className='header'>
          <View className='text-content'>
            <View className='title'>
              健而言之
            </View>
            <View className='text'>
              让健康习惯成为一种生活方式
            </View>
          </View>
          <View className='search-content'>
            <View className='search-icon'>
              <AtIcon value='search' size='20' color='#39958C'/>
            </View>
          </View>
        </View>
        <View className='top-challenge'>
          <HotSwiper data={hotChallenge}/>
        </View>
        <View className='re-topic'>
          <TopicAndMore data={recommendedTopicProps} />
          <View className='re-challenges'>
            {
              hotTopic.map((item, index) => {
                return (
                  <View key={index}>
                    <Image className='topic-image' src={item.img}/>
                    <View className='topic-name'>{item.topicName}</View>
                  </View>
                )
              })
            }
          </View>
          <View className='hot-person'>
            {
              hotPerson.map((item, index) => {
                return (
                  <PersonCard item={item} key={index}/>
                );
              })
            }
          </View>
        </View>
        <Line/>
        <View className='hot-challenge'>
          <TopicAndMore data={hotChallengesProps} />
          <View>
            {
              hotChallenges.map((item, index) => {
                return moreHotChallenge ?
                  (<ChallengeCard data={item} key={index}/>) : (index < LESS ?
                  (<ChallengeCard data={item} key={index}/>) : null)
              })
            }
          </View>
        </View>
        <Line/>
        <View className='hot-release'>
          <TopicAndMore data={hotReleaseProps} />
          <View>
            {
              hotRelease.map((item, index) => {
                return(<ChallengeCard data={item} key={index}/>)
              })
            }
          </View>
        </View>
      </ScrollView>

    );
  }
}
